<% layout('/layouts/default.html', {title: '车辆详情管理', libs: ['validate','fileupload']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-note"></i> ${text(car.isNewRecord ? '新增车辆详情' : '编辑车辆详情')}
			</div>
			<div class="box-tools pull-right hide">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<#form:form id="inputForm" model="${car}" action="${ctx}/car/car/save" method="post" class="form-horizontal">
			<div class="box-body">
				<div class="form-unit">${text('基本信息')}</div>
				<#form:hidden path="carId"/>
				<div class="row">
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('类型')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:treeselect id="typeId" title="${text('类型选择')}"   placeholder="请选择车辆类型"
									path="typeId" labelPath="treeName"
									url="${ctx}/car/carType/treeData?typeCode=${car.typeId}"
									callbackFuncName="typeSelectCallback"
									class="" allowClear="true" canSelectRoot="true" canSelectParent="true"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('名称')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="carTitle" maxlength="64" placeholder="请输入车辆名称" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('车辆归属地')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="originPlace" maxlength="64" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('看车地点')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="lookCarPlace" maxlength="64" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('品牌')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:select path="brandId" items="${brandList}" itemLabel="title" itemValue="brandId" class="form-control required" />
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('车型')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="carModel" maxlength="64" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('车身颜色')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="carColor" maxlength="64" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required">*</span> ${text('公里数')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="kilometer" maxlength="32" class="form-control required"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('原价')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="originalPrice" placeholder="以元为单位" maxlength="10" class="form-control required digits"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required ">*</span> ${text('售卖价格')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="sellPrice" placeholder="以元为单位" maxlength="10" class="form-control required digits"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('过户次数')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="transfers" maxlength="3" class="form-control digits"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('上户日期')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="registerDate" readonly="true" maxlength="20" class="form-control laydate"
									dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('汽缸')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="cylinder" maxlength="16" class="form-control"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('标签')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="carLabel" maxlength="16" class="form-control"/>
							</div>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								<span class="required hide">*</span> ${text('详情电话')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<#form:input path="detailTel" maxlength="32" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2 col-sm-9-1" title="">
								<span class="required hide">*</span> ${text('具体车况')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10 col-sm-9-8">
								<#form:textarea path="explain" rows="4" maxlength="500" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<label class="control-label col-sm-2 col-sm-9-1" title="">
								<span class="required hide">*</span> ${text('备注')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-10 col-sm-9-8">
								<#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-footer">
				<div class="row">
					<div class="col-sm-offset-2 col-sm-10">
						<% if (hasPermi('car:car:edit')){ %>
							<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
						<% } %>
						<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
					</div>
				</div>
			</div>
		</#form:form>
	</div>
</div>
<% } %>
<script>

	$("#inputForm").validate({
		submitHandler: function(form){
			js.ajaxSubmitForm($(form), function(data){
				js.showMessage(data.message);
				if(data.result == Global.TRUE){
					js.closeCurrentTabPage(function(contentWindow){
						contentWindow.page();
					});
				}
			}, "json");
		}
	});

	// 自定义回调函数：类型选择后触发
	function typeSelectCallback(id, act, index, layero, nodes) {
		// 只处理“选择确定”和“清空选择”动作
		if (id === 'typeId') { // 确保是类型选择器的回调
			if (act === 'ok') {
				// 1. 从nodes中获取选中的类型ID（单选时nodes[0]是选中节点）
				var typeId = nodes[0].id; // 假设节点的id字段对应类型ID
				console.log("选中的类型ID：", typeId);

				// 2. 调用品牌查询接口（复用之前的品牌查询逻辑）
				queryBrandsByTypeId(typeId);
			} else if (act === 'clear') {
				// 3. 若清空类型选择，同步清空品牌下拉框
				$("#brandId").empty().append('<option value="">请先选择车辆类型</option>');
			}
		}
	}

	// 封装品牌查询逻辑（复用）
	function queryBrandsByTypeId(typeId) {

		if (!typeId) return;
		// 显示加载提示（用layer的load方法，返回加载索引）
		var loadIndex = layer.load(2, {
			shade: [0.3, '#fff'], // 遮罩层样式
			time: 10000 // 10秒后自动关闭（防止接口超时无反应）
		});
		$.ajax({
			url: "${ctx}/brand/brand/findList", // 后端查询品牌的接口
			type: "get",
			data: { typeCode: typeId },
			dataType: "json",
			success: function(data) {
				layer.close(loadIndex); // 关闭加载提示
				var brandSelect = $("#brandId");
				brandSelect.empty();
				if ( data.length > 0) {
					brandSelect.append('<option value="">请选择品牌</option>');
					$.each(data, function(i, brand) {
						brandSelect.append('<option value="' + brand.brandId + '">' + brand.title + '</option>');
					});
				} else {
					brandSelect.append('<option value="">该类型暂无品牌</option>');
					layer.msg("未查询到品牌数据", { icon: 5 }); // 提示信息
				}
			},
			error: function() {
				layer.close(loadIndex); // 关闭加载提示
				layer.msg("品牌查询失败，请重试", { icon: 2 }); // 错误提示
			}
		});

	}
</script>